<template>
    <div class="share-user-layout">
        <P class="list-text font-large24">选择分享人员</P>
        <ul class="user-list">
            <li class="user-item" v-for="(d,index) in userList" :key="index" @click.stop="onChoose(d)">
                <img :src="d.logo" alt="" class="touxiang">
                <span class="username font-large26" :class="{'checked-color': d.checked}">{{d.realName}}</span>
                <img src="../../assets/image/checked.png" alt="" class="checked-icon" v-if="d.checked">
            </li>
        </ul>
        <div class="confirm-layout" v-if="isShowConfirm">
            <div class="confirm">
                <p class="text font-large26">将该文件分享给<span>{{checkedUser.realName}}</span></p>
                <dialog-button-click @btnClick="onDialogBtnClick"/>
            </div>
        </div>
    </div>
</template>

<script>
    import DialogButtonClick from './DialogButtonClick'

    import { getUserListByProject } from '../../api/jurisdiction'
    import { fileShare } from '../../api/file'

    export default {
        name: 'DialogShareUser',
        components: {DialogButtonClick},
        props: ['data'],
        data() {
            return {
                isShowConfirm: false,
                userList: [],
                checkedUser: {},
            }
        },
        mounted() {
            this.getUserListByProject()
        },
        methods: {
            //获取分享人员列表
            getUserListByProject() {
                getUserListByProject()
                    .then(result => {
                        const { data } = result
                        data.forEach(d => {
                            d.checked = false;
                        })
                        this.userList = data
                        console.log(this.userList)
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            onChoose(d) {
                this.userList.forEach(item => {
                    item.checked = false;
                })
                this.isShowConfirm = true;
                d.checked = true;
                this.checkedUser = d;
            },
            fileShare() {
                fileShare(this.data.id, this.checkedUser.userId)
                    .then(() => {
                        this.$toast('分享成功');
                        this.isShowConfirm = false;
                        this.$parent.$parent.isShowShareUser= false;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            onDialogBtnClick (type) {
                if (type === '1') {
                  this.isShowConfirm= false;
                  return;
                }
                if(type === '2') {
                  this.isShowConfirm= false;
                  this.fileShare()
                }
            }
        }
    }
</script>

<style scoped>
    .share-user-layout {
        width: 730px;
        min-height: 600px;
        background: #F9F9F9;
        border-radius: 0 0 40px 40px;
        overflow-y: auto;
        box-sizing: border-box;
        position: absolute;
        top: 135px;
        right: 50%;
        transform: translateX(50%);
        padding-bottom: 12px;
    }
    .list-text {
        color: #000000;
        opacity: 0.5;
        padding: 22px 33px;
    }
    .user-list {
        padding: 0 15px;
        overflow: auto;
        max-height: 600px;
        min-height: 400px;
    }
    .user-item {
        height: 100px;
        background: #FFFFFF;
        border-radius: 30px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 30px;
    }
    .touxiang {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: aqua;
        margin-right: 27px;
    }
    .username {
        flex: 1;
    }
    .checked-color {
        color: #3EC5F0;
    }
    .checked-icon {
        width: 29px;
    }
    .confirm-layout {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3);
        z-index: 999;
    }
    .confirm {
        width: 700px;
        height: 300px;
        background: #FFFFFF;
        box-shadow: 1px 20px 20px 0 rgba(0, 0, 0, 0.05);
        border-radius: 40px;
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%);
    }

    .confirm .text {
        text-align: center;
        margin-top: 73px;
        box-sizing: border-box;
        margin-bottom: 54px;
    }
    .confirm .text span {
        color: #58C1F1;
        margin-left: 20px;
    }

</style>